/* 背景样式 */
iframe.background {
    position: fixed; /* 背景固定在窗口中 */
    top: 0; /* 背景顶部对齐 */
    left: 0; /* 背景左侧对齐 */
    width: 100%; /* 背景占满整个页面宽度 */
    height: 100%; /* 背景占满整个页面高度 */
    border: none; /* 无边框 */
    z-index: -2; /* 背景 iframe 在页面内容下方 */
    pointer-events: none; /* 禁止与背景交互 */
}

/* 菜单栏样式 */
iframe.menubar {
    position: fixed; /* 菜单栏固定在窗口中 */
    top: 0; /* 菜单栏顶部对齐 */
    left: 0; /* 菜单栏左侧对齐 */
    width: 100%; /* 菜单栏宽度占满整个页面 */
    height: 60px; /* 菜单栏的高度，按需求调整 */
    border: none; /* 无边框 */
    z-index: 1; /* 菜单栏 iframe 在背景之上 */
    pointer-events: auto; /* 允许与菜单栏交互 */
    background: rgba(53, 66, 74, 0.8); /* 半透明背景 */
}




/* 主内容 */
main {
    padding: 20px; /* 主内容的内边距为20px */
    z-index: 1; /* 确保页面内容在背景之上 */
    position: relative; /* 使得内容在背景之上 */
}

/* 全局 body 样式 */
body {
    font-family: Cambria, Arial; /* 使用 Cambria 或 Arial 字体 */
    background: transparent; /* 设置背景为透明 */
    margin-left: 80px; /* 左边距 */
    margin-right: 80px; /* 右边距 */
    display: flex; /* 使用 flex 布局 */
    flex-direction: column; /* 将内容按列方向排列 */
    align-items: center; /* 水平居中对齐 */
}

/* 标签页容器 */
.tabs {
    width: 100%; /* 宽度占满整个页面 */
    height: 100%; /* 高度占满整个页面 */
    margin: 50px auto 50px auto; /* 增加底部的 2px 外边距 */
    padding: 10px 15px; /* 留出内边距 */
    box-sizing: border-box; /* 包括内边距在内的总宽度计算 */
    transition: all ease 0.5s; /* 设置平滑过渡效果，持续时间为0.3秒 */

}


/* 标签样式 */
label {
    cursor: pointer; /* 鼠标悬停时显示指针 */
    background: transparent; /* 背景设置为透明 */
    color: #171717; /* 字体颜色为浅灰色 */

    border: none; /* 删除边框 */
    border-radius: 10px; /* 设置圆角边框 */
    padding: 1% 2%; /* 内边距根据百分比设定 */
    float: left; /* 标签左对齐 */
    margin-right: 2px; /* 右边距2px */
    font:  1.3em Cambria; /* 斜体，使用 Cambria 字体 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加模糊阴影效果 */
    transition: all ease 0.5s; /* 设置平滑过渡效果，持续时间为0.3秒 */

}

/* 悬停时的标签效果 */
label:hover {
   background: transparent; /* 鼠标悬停时背景仍为透明 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8); /* 添加模糊阴影效果 */
    transition: all ease 1s; /* 设置平滑过渡效果，持续时间为0.3秒 */


}
input[type="radio"] {
    display: none; /* 隐藏实际的 radio 按钮 */
}


/* 选中标签页时显示对应的面板 */
.tabs input:nth-of-type(1):checked ~ .panels .panel:nth-child(1),
.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
.tabs input:nth-of-type(4):checked ~ .panels .panel:nth-child(4),
.tabs input:nth-of-type(5):checked ~ .panels .panel:nth-child(5),
.tabs input:nth-of-type(6):checked ~ .panels .panel:nth-child(6){
    display: block; /* 显示选中的面板 */
    opacity: 1; /* 设置透明度为1（可见） */
    z-index: 20; /* 确保面板容器位于最前面 */
    transition: all ease 0.5s; /* 设置平滑过渡效果，持续时间为0.3秒 */

}

/* 面板容器样式 */
.panels {
    clear: both; /* 清除浮动 */
    position: relative; /* 相对定位 */
    width: 100%; /* 宽度为100% */
    height: auto; /* 高度自动根据内容变化 */
    background: transparent; /* 背景保持透明 */
    border-radius: 10px; /* 设置圆角 */
    box-sizing: border-box; /* 包括内边距在内的总宽度计算 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 添加模糊阴影效果 */
    margin-top: 100px; /* 添加 100px 的上外边距 */
    backdrop-filter: blur(4px); /* 背景模糊效果 */
    z-index: 5; /* 确保面板容器位于最前面 */
}



/* 面板样式 */
.panel {
    width: 100%; /* 面板宽度为100% */
    height: auto; /* 高度自动根据内容变化 */
    opacity: 0; /* 默认不可见 */
    position: absolute; /* 绝对定位 */
    background: transparent; /* 背景设置为透明 */
    border-radius: 0 10px 10px 10px; /* 设置圆角 */
    padding: 2%; /* 内边距为4% */
    z-index: 0; /* 确保面板容器位于最前面 */
    box-sizing: border-box; /* 包括内边距在内的总宽度计算 */
    backdrop-filter: blur(4px); /* 背景模糊效果 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 添加模糊阴影效果 */

}

/* 面板标题样式 */
.panel h2 {
    margin: 0; /* 删除默认外边距 */
    font-family: Arial; /* 使用 Arial 字体 */
}
.charts-container h3 {
    text-align: center; /* 水平居中 */
    font-family: Arial; /* 使用 Arial 字体 */
}

.containers {
    display: flex; /* 使用 flexbox 布局 */
    flex-wrap: wrap; /* 换行 */
    justify-content: flex-start; /* 水平从左到右排列 */
    align-items: center; /* 垂直居中对齐 */
    gap: 3%; /* 设置容器之间的间距 */
    width: 100%; /* 父容器占满100%的宽度 */
    box-sizing: border-box; /* 包括边距和内边距在内计算宽度 */
    margin: 3rem 2rem; /* 上下边距2rem，左右边距3rem */

}

/* 容器样式 */
.container {
  /*z-index: 500; !* 确保按钮在最上层 *!*/
  width: 18rem; /* 固定宽度为14rem */
  height:16rem; /* 固定高度为4rem */

  color: #171717; /* 设置文字颜色为深灰色 */
  position: relative; /* 设置容器为相对定位 */
  font-family: sans-serif; /* 设置字体为无衬线字体 */
}
.chartcontainers{
  z-index: 50; /* 确保按钮在最上层 */
  position: relative; /* 设置容器为相对定位 */
  width: 100%;
  height: 100%;



}

.chart-container{
  color: #171717; /* 设置文字颜色为深灰色 */

  z-index: 50; /* 确保按钮在最上层 */
  position: relative; /* 设置容器为相对定位 */
  width: 95%; /* 固定宽度为14rem */
  padding: 1rem; /* 内边距1rem */
  background-color: rgba(255, 255, 255, 0.074); /* 设置背景色为白色带透明度 */
  border: 1px solid rgba(255, 255, 255, 0.222); /* 设置边框为白色带透明度 */
  -webkit-backdrop-filter: blur(20px); /* 使用模糊背景效果（针对Safari浏览器） */
  backdrop-filter: blur(20px); /* 使用模糊背景效果 */
  border-radius: 0.7rem; /* 设置圆角边框 */
  transition: all ease 0.3s; /* 设置平滑过渡效果，持续时间为0.3秒 */
  margin-bottom: 20px;         /* 图表容器底部的外边距 */

}
.chart-container:hover {
  box-shadow: 0px 0px 20px 1px #ffbb763f; /* 设置鼠标悬停时的阴影效果 */
  border: 1px solid rgba(255, 255, 255, 0.454); /* 鼠标悬停时边框的透明度增加 */
}
 /* 删除按钮样式 */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            font-weight: bold;
            color: #ff0000;
            cursor: pointer;
            padding: 5px;
            background: transparent; /* 背景设置为透明 */
            border-radius: 50%;
            width: 30px;
            height: 30px;
            text-align: center;
        }

        .close-btn:hover {
            background-color: rgba(255, 0, 0, 0.1);
        }

/* .box样式 */
.container .box {
  width: 14rem; /* 固定宽度为14rem */
  height: 10rem; /* 固定高度为4rem */
  padding: 1rem; /* 内边距1rem */
  background-color: rgba(255, 255, 255, 0.074); /* 设置背景色为白色带透明度 */
  border: 1px solid rgba(255, 255, 255, 0.222); /* 设置边框为白色带透明度 */
  -webkit-backdrop-filter: blur(20px); /* 使用模糊背景效果（针对Safari浏览器） */
  backdrop-filter: blur(20px); /* 使用模糊背景效果 */
  border-radius: 0.7rem; /* 设置圆角边框 */
  transition: all ease 0.3s; /* 设置平滑过渡效果，持续时间为0.3秒 */
}

/* .box的hover效果 */
.container .box:hover {
  box-shadow: 0px 0px 20px 1px #ffbb763f; /* 设置鼠标悬停时的阴影效果 */
  border: 1px solid rgba(255, 255, 255, 0.454); /* 鼠标悬停时边框的透明度增加 */
}


/* From Uiverse.io by aadium */
/* Hide the default checkbox */
.container1 input {
  position: absolute;
  opacity: 0; /* 隐藏默认的复选框 */
  cursor: pointer; /* 鼠标悬停时显示手指 */
  height: 0; /* 隐藏复选框的高度 */
  width: 0; /* 隐藏复选框的宽度 */
  backdrop-filter: blur(10px); /* 背景模糊效果 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 添加模糊阴影效果 */




}

.container1 {
      margin-top: 10px; /* 设置上边距 */
  margin-bottom: 10px; /* 设置下边距 */
  margin-left: 10px; /* 设置左边距 */
  margin-right: 40px; /* 设置右边距 */
  display: block;
  position: relative;
  cursor: pointer; /* 鼠标悬停时显示手指 */
  font-size: 50px;
  user-select: none; /* 禁止选择文字 */
  border: 1px solid rgba(0, 0, 0, 0.1); /* 鼠标悬停时边框的透明度增加 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 添加模糊阴影效果 */


}

/* Create a custom checkbox */
.checkmark1 {

  position: relative;
  height: 80px; /* 复选框的高度 */
  width: 80px; /* 复选框的宽度 */
  background-color: rgba(0, 0, 0, 0); /* 设置复选框背景颜色 */
  transition: 0.3s; /* 平滑过渡效果 */

}

.checkmark1 svg {
  width: 50px; /* SVG图标宽度 */
  height: 50px; /* SVG图标高度 */
  margin-top: 15px; /* 上边距 */
  margin-left: 15px; /* 左边距 */
  fill: #264d39; /* 图标填充颜色 */
  transition: 0.2s; /* 平滑过渡效果 */
}

.checkmark1:active {
  /* 当复选框被点击时 */
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1), /* 透明阴影 */
              -2px -2px 3px rgba(0, 0, 0, 0); /* 透明阴影 */
}

/* When the checkbox is checked */
.container1 input:checked ~ .checkmark1 {
  /* 复选框被选中时 */
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0), /* 透明阴影 */
              -4px -4px 6px rgba(0, 0, 0, 0); /* 透明阴影 */
}

.container1 input:checked ~ .checkmark1 svg {
  fill: #00ff7b; /* 选中时改变图标的颜色 */
}

.container1 input:checked ~ .checkmark1:active {
  /* 复选框选中且被点击时 */
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0), /* 透明阴影 */
              -2px -2px 3px rgba(0, 0, 0, 0); /* 透明阴影 */
}

.line {
  border: none; /* 移除默认的边框样式 */
  border-top: 2px solid #48d1cc; /* 设置上边框颜色为 #e0e0e0，线条颜色 */
  margin: 20px 0; /* 设置上下的外边距，控制线条与其他元素的间距 */
}

/* From Uiverse.io by vinodjangid07 */
.input-wrapper {
  width: 80%;
  height: 30%;
  border-radius: 5px;
  box-sizing: content-box;
  display: flex;
  align-items: center;

  /* 使用外边距来调整位置 */
  margin-top: 0px; /* 上边距 */
  margin-left: auto; /* 左边距自动，居中 */
  margin-right: auto; /* 右边距自动，居中 */
  margin-bottom: 2px; /* 下边距 */
}

.input {
  max-width: 65%; /* 输入框最大宽度 */
  height: 100%; /* 高度填满容器 */
  border: none;
  outline: none;
  padding-left: 15px; /* 左边距 */
  background-color: #3a3535; /* 更浅的深色背景 */
  color: white; /* 文字颜色为白色 */
  font-size: 1em;
}


.Subscribe-btn {
  height: 100%;
  width: 30%;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  background-color: #ffffff; /* 按钮背景色为白色 */
  color: #292524; /* 按钮文字颜色为深色 */
  font-weight: 500;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s;
  border: 2px solid #292524; /* 按钮边框颜色与输入框背景一致 */
}

.arrow {
  /* 显示箭头 */
  position: absolute;
  margin-right: 150px;
  transition: all 0.3s;
}



.Subscribe-btn:hover {
  color: white; /* 按钮文本颜色为白色 */
  background-color: rgba(0, 0, 0, 0.1);  /* 略带透明度的背景色 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8); /* 焦点时的阴影效果 */
}

.Subscribe-btn:hover .arrow {
  margin-right: 0; /* 悬停时箭头位置改变 */
  animation: jello-vertical 0.9s both; /* 添加动画效果 */
  transform-origin: right;

}



.panel table {
  border-spacing: 5px 10px;  /* 第一项是水平间距，第二项是垂直间距 */
  margin: 0 auto;  /* 将表格水平居中 */
}

.panel input[type=text], input[type=number], input[type=password], select {

    padding: 8px 12px;
    display: inline-block;
    border: none;
    background: transparent;  /* 默认透明背景 */
    box-sizing: border-box;
    float: left;
    margin-right: 2%; /* 右边距2px */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加模糊阴影效果 */
    transition: background-color 0.3s ease,
    box-shadow 0.3s ease;
    border-radius: 4px; /* 设置圆角 */

}
.panel input[type=text]:hover,
.panel input[type=number]:hover,
.panel input[type=password]:hover,
.panel select:hover {
    padding: 9px 13px;
    background-color: rgba(0, 0, 0, 0.1);  /* 悬停时背景变为淡灰色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* 添加模糊阴影效果 */

}
/* 输入框获得焦点时 */
.panel input[type=text]:focus,
.panel input[type=number]:focus,
.panel input[type=password]:focus,
.panel select:focus {
    background-color: rgba(0, 0, 0, 0.1);  /* 略带透明度的背景色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8); /* 焦点时的阴影效果 */
    outline: none;  /* 去除默认的聚焦边框 */
}

/* 输入框有内容时 */
.panel input[type=text]:valid,
.panel input[type=number]:valid,
.panel input[type=password]:valid {
    background-color: rgba(0, 0, 0, 0.3);  /* 有内容时略显背景 */
}

/* 输入框为空时 */
.panel input[type=text]:empty,
.panel input[type=number]:empty,
.panel input[type=password]:empty {
    background-color: transparent;  /* 空时保持透明背景 */
}

.panel select {
    background: transparent;  /* 设置按钮的背景色为透明 */
    width: 100%;
    border: none;
    border-radius: 4px; /* 设置圆角 */

}

/* 选中时的效果 */
.panel select:focus {
    border-color: #007BFF;  /* 焦点时的边框颜色 */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* 聚焦时的阴影效果 */
}

/* 定义 option 元素样式 */
.panel select option {
    background: transparent;  /* 设置按钮的背景色为透明 */
    padding: 10px; /* 添加内边距 */
    color: #333; /* 设置选项的字体颜色 */
    font-size: 1em; /* 设置字体大小 */
}

/* 当 hover 或 focus 时选项样式 */
.panel select option:hover {
    background: transparent;  /* 设置按钮的背景色为透明 */
}



.panel button {
  border: none;  /* 去除按钮的边框 */
  padding: 8px 12px;  /* 设置按钮的内边距，垂直方向为 12px，水平方向为 20px */
  /*z-index: 1000; !* 确保按钮在最上层 *!*/
  margin: 8px 0;  /* 设置按钮的外边距，上下为 8px，左右为 0 */
  display: inline-block;  /* 设置按钮为行内块元素，这样它可以与其他元素在同一行显示 */
  border-radius: 4px;  /* 设置按钮的圆角半径为 4px，使按钮的边角圆滑 */
  background-color: rgba(0, 0, 0, 0.05);  /* 略带透明度的背景色 */

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* 给按钮添加模糊阴影，阴影的水平位移为 0，垂直位移为 4px，模糊半径为 10px，颜色为 rgba(0, 0, 0, 0.5)，即半透明的黑色阴影 */
  position: relative;  /* 改为相对定位，保持文档流 */


}

.panel .submit button{
  position: relative;  /* 改为相对定位，保持文档流 */
  left: 50%;           /* 水平居中 */
  border: none;
}

.panel button:hover {
  color: white;  /* 设置文字颜色为白色 */
  padding: 8.5px 12.5px;  /* 增加按钮的垂直内边距至 8.5px，保持水平内边距为 12.5px */
  margin: 8px 0;  /* 保持按钮的外边距为上下 8px，左右 0 */
  border-radius: 4px;  /* 设置圆角样式 */
  background-color: rgba(0, 0, 0, 0.05);  /* 略带透明度的背景色 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* 添加模糊阴影效果 */
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}



/* 表格样式 */
table {
  border-collapse: collapse;  /* 合并单元格边框 */
  margin-bottom: 20px;  /* 表格底部的间距 */
  background-color: transparent;  /* 设置表格背景为透明 */
  width: auto;  /* 表格宽度自动 */
  margin-left: 0px;  /* 将表格对齐到左侧 */
  display: block;  /* 设置表格为块级元素，确保表格可以靠左显示 */
}

/* 表格的单元格边框和填充 */
td, th {
  padding: 10px;  /* 设置单元格内边距 */
  vertical-align: middle;  /* 垂直居中 */
  text-align: center;  /* 水平居中文字 */
  background-color: transparent;  /* 设置单元格背景为透明 */
}

/* 表头的样式 */
th {
  color: black;  /* 表头文字颜色 */
  font-weight: bold;  /* 加粗字体 */
  text-align: center;  /* 表头文字居中对齐 */
}

/* 设置表格的行背景色 */
tr:nth-child(odd) {
  background-color: transparent;  /* 奇数行背景色透明 */
}

tr:nth-child(even) {
  background-color: transparent;  /* 偶数行背景色透明 */
}

/* 鼠标悬停在行上的效果 */
tr:hover {
  background-color: transparent;  /* 悬停时行背景色透明 */
}

/* Form样式 */
form {
    position: relative;               /* 确保表单布局 */
    z-index: 1;                      /* 设置 z-index 确保表单在顶层 */
    margin: 0 auto;  /* 将表格水平居中 */

}

/* 响应式布局，当宽度小于 768px 时 */
@media (max-width: 768px) {
    .tabs {
        max-width: 100%; /* 在小屏幕上，允许 tabs 宽度填满屏幕 */
        padding: 0 10px; /* 内边距调整为 10px */
    }

    label {
        font-size: 0.9em; /* 减小文字大小以适应小屏幕 */
        padding: 10px; /* 调整标签内边距 */
    }

    .panel {
        padding: 3%; /* 减小面板内边距 */
    }
   .panels{
        margin-top: 50px;
    }

}

/* 响应式布局，当宽度小于 480px 时 */
@media (max-width: 480px) {
    label {
        font-size: 0.8em; /* 在非常小的屏幕上进一步缩小字体 */
        padding: 8px; /* 调整标签内边距 */
    }

    .panel {
        padding: 2%; /* 进一步减小面板内边距 */
    }
   .panels{
        margin-top: 30px;
    }

}



